import { format } from 'date-fns';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import { Page } from 'src/constant/Page';
// import { BankAccount } from 'src/model/Bank';
// import { TradingForm } from 'src/model/Form';
import { openSnackbar } from 'src/redux/uiSlice';
// import { addMyAdGoods, updateOrder } from 'src/service/orderService';
import { addMyAdGoods } from 'src/service/orderService';
import { bnFormat } from 'src/util/bigNumber';
import style from './TradingConfirm.module.scss';

type BankAccount = any
type TradingForm = any


const TradingConfirm = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { t } = useTranslation();
    const token = localStorage.getItem("token")
    const state = location.state as (TradingForm & { bankAccount: BankAccount }) | null;

    useEffect(() => {
        if (state === null) navigate(Page.Trading);
    });

    const onSubmit = (action: 'saveChange' | 'saveAndOpen') => () => {
        if (state === null) return;
        addMyAdGoods({
            token: token,
            FUserID: state?.bankAccount?.FUserID,
            FGoods: state?.base,
            FCNY: state?.quote,
            FPrice: state?.price,
            FQuantity: state?.amount,
            FMin: state?.minTotal,
            FMax: state?.maxTotal,
            FBankID: state?.bankAccount?.FID,
            FCoin: state?.coin,
        }).then(res => {
            if (res.success) {
                navigate(Page.MyTrade, { replace: true })
            }
        }).catch(e => { })
        // if (state.orderId !== undefined)
        //     updateOrder(state.orderId, action, {
        //         price: Number(state.price),
        //         openAmount: Number(state.amount),
        //         minTotal: Number(state.minTotal),
        //         maxTotal: Number(state.maxTotal),
        //         suspendedAt: (state.suspendedAt?.length ?? 0) > 0 ? state.suspendedAt : null,
        //         bankAccountId: state.bankAccountId,
        //     })
        //         .then(() => navigate(Page.MyTrade, { replace: true }))
        //         .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
        // else
        //     createOrder({
        //         base: state.base,
        //         quote: state.quote,
        //         price: Number(state.price),
        //         openAmount: Number(state.amount),
        //         minTotal: Number(state.minTotal),
        //         maxTotal: Number(state.maxTotal),
        //         suspendedAt: (state.suspendedAt?.length ?? 0) > 0 ? state.suspendedAt : undefined,
        //         bankAccountId: state.bankAccountId,
        //         clientId: Date.now().toString(),
        //     })
        //         .then(() => navigate(Page.MyTrade, { replace: true }))
        //         .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    const onCancel = () => {
        navigate(Page.Trading, { replace: true, state });
    };

    return (
        <div className={style.self}>
            <BackButton />
            <div className={style.head}>发布确认</div>
            <div className={style.content}>
                <div className={style.block}>
                    <div>
                        <div className={style.key}>交易类型</div>
                        <div>出售</div>
                    </div>
                    <div>
                        <div className={style.key}>商品</div>
                        <div>{state?.base.toUpperCase()}</div>
                    </div>
                    <div>
                        <div className={style.key}>交易法币</div>
                        <div>{state?.quote.toUpperCase()}</div>
                    </div>
                </div>
                <div className={style.divider} />
                <div className={style.block}>
                    <div>
                        <div className={style.key}>单价</div>
                        <div>{`${bnFormat(state?.price ?? '')} ${state?.quote.toUpperCase()}`}</div>
                    </div>
                    <div>
                        <div className={style.key}>数量</div>
                        <div>{`${bnFormat(state?.amount ?? '')} ${state?.base.toUpperCase()}`}</div>
                    </div>
                    <div>
                        <div className={style.key}>限额</div>
                        <div>
                            {`${bnFormat(state?.minTotal ?? '')} ~ ${bnFormat(
                                state?.maxTotal ?? '',
                            )} ${state?.quote.toUpperCase()}`}
                        </div>
                    </div>
                    {/* {(state?.suspendedAt?.length ?? 0) > 0 && (
                        <div>
                            <div className={style.key}>自动下架时间</div>
                            <div>{format(Date.parse(state?.suspendedAt ?? ''), 'yyyy/MM/dd HH:mm:ss')}</div>
                        </div>
                    )} */}
                </div>
                <div className={style.divider} />
                <div className={style.payment}>
                    <div className={style.title}>收款方式</div>
                    <div className={style.bank}>
                        <div>{state?.bankAccount.FBHm}</div>
                        <div>{state?.bankAccount.FBMc}</div>
                        <div>{state?.bankAccount.FBZh}</div>
                        <div className={style.location}>
                            <div>{state?.bankAccount.FBSf}</div>
                            <div>{state?.bankAccount.FBCs}</div>
                        </div>
                        <div>{state?.bankAccount.FBFy}</div>
                    </div>
                </div>
                <div className={style.buttons}>
                    <div>
                        <Button appearance="outlined" onClick={onCancel}>
                            取消
                        </Button>
                    </div>
                    <div className={style.confirm}>
                        {state?.orderId === undefined && (
                            <Button onClick={onSubmit('saveAndOpen')}>送出</Button>
                        )}
                        {state?.orderId && (state?.suspendedAt?.length ?? 0) === 0 && (
                            <Button onClick={onSubmit('saveChange')}>储存</Button>
                        )}
                        {state?.orderId && (
                            <Button onClick={onSubmit('saveAndOpen')}>
                                储存并上架
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default TradingConfirm;
